<template>
  <div class="gva-table-box">
    <div class="gva-btn-list search-form" style="padding-top: 80px">
      <el-form ref="formRef" :model="CustomerInfo" style="width: 100%">
        <el-row :gutter="20" class="flex">
          <el-col :span="5">
            <el-form-item label="客户名称" prop="companyName">
              <el-input
                clearable
                v-model="CustomerInfo.companyName"
                placeholder="客户名称"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="负责人" prop="companyManager">
              <el-input
                clearable
                v-model="CustomerInfo.companyManager"
                placeholder="负责人"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="手机号" prop="phone">
              <el-input
                clearable
                v-model="CustomerInfo.phone"
                placeholder="手机号"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="邮箱" prop="email">
              <el-input
                clearable
                v-model="CustomerInfo.email"
                placeholder="邮箱"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <el-button
                type="primary"
                icon="Search"
                class="action"
                style="margin-left: 20px"
                @click="getsearch"
                >搜索</el-button
              >
              <el-button class="action reset" @click="resetForm()">重置搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <div>
        <el-table
          :data="dataList"
          row-key="ID"
          :row-class-name="tableRowClassName"
          style="height: 480px"
        v-loading="loading"

        >
          <el-table-column align="center" label="序" min-width="75">
            <template #default="scope">
              <span>{{ (page - 1) * pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="客户名称"
            min-width="200"
            prop="companyname"
          >
          </el-table-column>
          <el-table-column
            align="center"
            label="负责人"
            min-width="200"
            prop="companymanager"
          >
          </el-table-column>
          <el-table-column
            align="center"
            label="创建时间"
            min-width="200"
            prop="createtime"
          />
          <el-table-column align="center" label="国家" prop="countryarea" />
          <el-table-column align="center" label="邮箱" min-width="200" prop="email" />
          <el-table-column align="center" label="whatsapp" min-width="200" prop="whatsapp" />
          <el-table-column align="center" label="跟进天数"  prop="followupcount" />
          <el-table-column align="center" label="未跟进天数" prop="notfollowupday" />
        </el-table>
        <div class="gva-pagination">
          <el-pagination
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 30, 40]"
            layout="prev, pager, next, jumper, total, sizes"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from "vue";
import { leadscloudcustomerlist } from "@/api/customer";
import { useRoute, useRouter } from "vue-router";
defineOptions({
  name: "leadscloudcustomerlist",
});

const route = useRoute();
const router = useRouter();
// 获取产品列表
const dataList = ref([]);
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const query = route.query;
const loading = ref(false)

const CustomerInfo = reactive({
  product_name: "",
  sku:''
});
const gettime = (shijianchuo) => {
  if (!Number(shijianchuo)) {
    return "- -";
  }
  //shijianchuo是整数，否则要parseInt转换
  var time = new Date(Number(shijianchuo * 1000));
  var y = time.getFullYear();
  var m = time.getMonth() + 1;
  var d = time.getDate();
  var h = time.getHours();
  var mm = time.getMinutes();
  var s = time.getSeconds();
  return (
    y + "-" + add0(m) + "-" + add0(d) + " " + add0(h) + ":" + add0(mm) + ":" + add0(s)
  );
};
function add0(m) {
  return m < 10 ? "0" + m : m;
}

const getGoodsData = async (requestdata) => {
  requestdata.PageIndex = page.value;
  requestdata.PageSize = pageSize.value;
  loading.value = true
  leadscloudcustomerlist(requestdata).then((res) => {
    loading.value = false

    if (res.errcode == 0) {
      dataList.value = res.content
      total.value = Number(res.totalRecords)
    }
  });

};
getGoodsData(CustomerInfo);
const getsearch = async () => {
  page.value = 1;

  getGoodsData(CustomerInfo);
};

const handleCurrentChange = (num) => {
  page.value = num;
  getGoodsData(CustomerInfo);
};

const handleSizeChange = (num) => {
  pageSize.value = num;
  getGoodsData(CustomerInfo);
};
const formRef = ref();
const resetForm = () => {
  formRef.value.resetFields();
  getGoodsData(CustomerInfo);
};
const tableRowClassName = ({ row, rowIndex }) => {
  // 通过rowIndex判断奇偶行，添加不同的类名
  if (rowIndex % 2 === 0) {
    return "even-row";
  } else {
    return "odd-row";
  }
};
</script>

<style lang="scss" scoped>
.product_name {
  white-space: nowrap; /* 保持文本在一行，不换行 */
  overflow: hidden; /* 超出容器部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号表示文本被截断 */
}
.balanceTitle {
  font-size: 20px;
  margin-bottom: 20px;
}
.activetitle {
  color: red;
  margin-left: 12px;
}
.red {
  color: red;
}
.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}

.gva-table-box {
  margin: 20px;
}

:deep(.el-input__inner) {
  font-size: 12px !important;
  color: rgba(0, 0, 0, 0.85) !important;
}

:deep(.el-select__wrapper) {
  font-size: 12px !important;

  .el-select__selected-item {
    font-size: 12px !important;
  }
}

.logo-img {
  width: 46px;
}
</style>

<style lang="scss">
:deep(.el-form-item) {
  align-content: center;
}
</style>
